<template>
	<view :class="vuex_theme">
		<view class="video-detail-content color-gradual">
			<u-navbar class="video-detail-content-title color-gradual" back-text="返回"
				:background="{background: vuex_bar_color}" :border-bottom="false" @custom-back="back()">
				<u-notice-bar class="slot-wrap-center" model="vertical" :list="[videoName]" :volume-icon="false" type="none"></u-notice-bar>
				<view slot="right" class="slot-wrap-right color-ico-gradual" shape="circle" @click="changeVideoRate()">{{playbackRate}}倍速</view>
			</u-navbar>
			<video class="video-detail-content-play"
				id="video-detail-content-play"
				:style="'height:' + videoHeight"
				:src="videoSrc"
				:poster="videoPoster"
				:autoplay="true" controls></video>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoName: undefined,
				videoSrc: undefined,
				videoPoster: undefined,
				videoHeight: 'calc(100vh - 44px)',
				videoContext : undefined,
				playbackRate: 1.0,
				playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0]
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('video-detail-content-play')
		},
		onLoad(data) {
			this.videoName = data.videoName
			this.videoSrc = this.$u.http.config.baseUrl + '/api/file/video/show/' + encodeURI(data.videoName)
			this.videoPoster = this.$u.http.config.baseUrl + '/api/file/video/show/' + encodeURI(data.videoName) + '?x-oss-process=video/snapshot,t_0,m_jpg'
			
			uni.getSystemInfo({
			    success: function (res) {
			        this.videoHeight = (res.windowHeight - 44) + 'px'
			    }
			});
			uni.onWindowResize((res) => {
				this.videoHeight = (res.size.windowHeight - 44) + 'px'
			})
		},
		methods: {
			back() {
				this.$u.route({
					url: 'pages/cloud/video/index',
					type: 'tab'
				})
			},
			changeVideoRate() {
				let index = this.playbackRates.indexOf(this.playbackRate) + 1
				index = index % this.playbackRates.length
				this.playbackRate = this.playbackRates[index]
				this.videoContext.playbackRate(this.playbackRate)
			}
		}
	}
</script>


<style lang="scss" scoped>
	
	.video-detail-content {
		text-align: center;
		margin: 0;
		padding: 0;
		position: relative;
		.slot-wrap-center {
			margin-right: 80px;
		}
		.slot-wrap-right {
			position: absolute;
			width: 80px;
			height: 30px;
			top: 12px;
			right: 0rpx;
			display: inline-block;
			.slot-wrap-right-btn {
			}
		}
		
	}

	.video-detail-content-play {
		width: 100%;
	}
</style>
